<template>
    <div class="page">
      <el-carousel ref="refSwipper" :height="wHeight+'px'" :interval="1000*30" :autoplay="false">
        <el-carousel-item v-for="(item,index) in picList" :key="index">
          <img class="bg" :src="item.picurl" />
        </el-carousel-item>
      </el-carousel>
      <button class="btn btn-login" @click="showLogin = true">登录</button>
      <el-dialog
              :close-on-click-modal="false"
              :close="() => showLogin = false"
              :visible.sync="showLogin" width="600px">
          <div class="Logins">
              <el-tabs v-model="activeName">
                  <el-tab-pane label="账号登录" name="0">
                    <el-alert :title="phoneError" type="error" v-if="phoneError" :closable="false"></el-alert>
                      <el-form ref="form" :model="zhinfo" style="margin-top: 40px;" label-width="0">
                          <el-form-item>
                              <el-input v-model="zhinfo.account" @input="phoneError = ''" placeholder="账号"></el-input>
                          </el-form-item>
                          <el-form-item prop="pass" style="margin-top: 10px;">
                              <el-input type="password" placeholder="密码" v-model="zhinfo.password" @input="phoneError = ''"
                                        autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item style="margin-top: 30px; margin-bottom: 0px;">
                              <el-button type="primary" class="btns" style="width: 100%" @click="zhSubmit">登录
                              </el-button>
                          </el-form-item>
                      </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="手机号登录" name="1">
                      <el-alert :title="phoneError" type="error" v-if="phoneError" :closable="false"></el-alert>
                      <el-form ref="form" :model="dxinfo" style="margin-top: 40px;" label-width="0">
                          <el-form-item>
                              <el-input v-model="dxinfo.mobileNum" placeholder="手机号" maxlength="11"
                                        @input="phoneError = ''"></el-input>

                          </el-form-item>
                          <el-form-item prop="pass" style="margin-top: 10px;">
                              <el-input placeholder="验证码" v-model="dxinfo.verifyCode" @input="verifySms" maxlength="6"
                                        style="width: 220px; margin-right: 20px; display: inline-block; float: left;"></el-input>
                              <el-button :disabled="sendCode > 0 ? true: false" @click="sendSms"
                                          style="width: 30%; margin-left: 5%; float: left;" type="primary">{{sendCode ?
                                  sendCode+'秒后可再次获取' : '点击获取验证码'}}
                              </el-button>
                              <!-- <div class="yzms"></div> -->
                          </el-form-item>
                          <el-form-item style="margin-top: 30px; margin-bottom: 0px;">
                              <el-button type="primary" class="btns" style="width: 100%" @click="dxSubmit">登录
                              </el-button>
                          </el-form-item>
                      </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="身份证号登录" name="2">
                      <el-form ref="form" :model="sfinfo" style="margin-top: 40px;" label-width="0">
                          <el-form-item>
                              <el-input placeholder="身份证号" id="certNumber" style="width: 70%"
                                        v-model="sfinfo.identifyCode"></el-input>
                              <el-button @click="duqu" style="width: 25%; margin-left: 5%" type="primary">读取身份信息
                                </el-button>
                          </el-form-item>
                          <el-form-item prop="pass" style="margin-top: 10px;">
                              <el-input placeholder="密码" type="password" v-model="sfinfo.password"
                                        autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item style="margin-top: 30px; margin-bottom: 0px;">
                              <el-button type="primary" class="btns" style="width: 100%" @click="sfSubmit">登录
                              </el-button>
                          </el-form-item>
                      </el-form>
                  </el-tab-pane>
              </el-tabs>
          </div>
      </el-dialog>

      
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import {
  login,
  loginCompany,
  CVBaseInfo,
  EnterpriseInfo,
  sendMessage,
  GetQueryString,
  mobileLogin,
  userIdLogin,
  CompanyMobileLogin,
  CompanyIdLogin,
  CommonPicList,
  CompanyRegisterDelete,
} from '@/assets/js/domains'
import util from '@/assets/js/util'

export default {
  name: 'FacerLogin',
  data () {
    return {
      wHeight:0,
      picList:[],
      fuli: [],
      zhinfo: {},
      sfinfo: {},
      dxinfo: {},
      phoneError: '',
      activeName: 0,
      showLogin: false,
      innerVisible: false,
      bigImageUrl: '',
      isLogin: false,
      shenfen: 2,
      user_uid: '',
      md_userInfo: {},
      companyInfo: {},
      smsCode: '',
      sendCode: 0,
    }
  },
  computed: {},
  created () {
    this.wHeight = window.innerHeight;
    this.getPicList()

    window.getCertData = (result) => {
      if(!result || !result.Certificate || !result.Certificate.IDNumber){
        this.$alert("未检测到身份证号码",'提示')
        return
      }
      this.sfinfo.identifyCode = result.Certificate.IDNumber
    }
  },
  mounted() {
    this.timerSwipper = setInterval(() => {
      this.$refs.refSwipper.next()
    }, 1000 * 30)
  },
  destroyed(){
    this.timerSwipper && clearInterval(this.timerSwipper)
  },
  methods: {
    getEnterpriseInfo: function () {
      const _this = this
      EnterpriseInfo({ enterprise_id: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.companyInfo = res.data
          res.data.treatment && (_this.fuli = res.data.treatment.split(',').filter(item => !!item.trim()))
          _this.isLogin = true
          if (localStorage.getItem('md_userInfo')) {
            _this.md_userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
            _this.md_userInfo.approval = _this.companyInfo.approval
            _this.md_userInfo.addressDetail = _this.companyInfo.addressDetail
            _this.md_userInfo = Object.assign({}, _this.md_userInfo)
            localStorage.setItem('md_userInfo', JSON.stringify(_this.md_userInfo))
          }
        }
      })
    },
    getPicList(){
      CommonPicList({ pic_type: 'smj' }).then(res => {
        if (res.code === 200) {
          this.picList = res.data
        }
      })
    },
    zhSubmit: function () {
      const _this = this
      if (_this.zhinfo.account == '' || !_this.zhinfo.account) {
        this.phoneError = '请输入账号'
        return false
      } else {
        this.phoneError = ''
      }
      if (_this.zhinfo.password == '' || !_this.zhinfo.password) {
        this.phoneError = '请输入密码'
        return false
      } else {
        this.phoneError = ''
      }
      const formData = Object.assign({}, _this.zhinfo)
      formData.password = util.strEncode(formData.password)
      
      loginCompany(formData).then(function (res) {
        _this.successDeal(res)
      }).catch(function (e) {
        _this.$alert('登录失败', '提示')
      })
    },
    auditCheck(data) {
      this.showLogin = false
      EnterpriseInfo({ enterprise_id: data.id }).then(res => {
        this.isLogin = true
        if (res.code === 200) {
          data = res.data
          if (data.approval == 2) {
            this.$router.push({path: '/companyInfo'})
            return false
          }
          this.$alert(data.approval == 1 ? '企业审核中暂不能登录' : '企业审核未通过，暂不能登录', '提示')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    
    sendSms() {
      var _this = this
      if (!this.dxinfo.mobileNum) {
        this.phoneError = '请输入手机号'
        return
      }
      if(!util.isMobile(this.dxinfo.mobileNum)){
        this.phoneError = '请输入正确的手机号'
        return
      }
      this.phoneError = ''
      sendMessage({ phoneNumber: this.dxinfo.mobileNum }).then(res => {
        if (res.code == 200) {
          _this.$message.success('验证码发送成功')
          _this.sendCodeInterval()
          _this.smsCode = res.data
        }
      })
    },
    sendCodeInterval () {
      this.sendCode = 60
      var _this = this
      var intervalHanlder = setInterval(function () {
        _this.sendCode -= 1
        if (_this.sendCode <= 0) {
          clearInterval(intervalHanlder)
        }
      }, 1000)
    },
    verifySms: function () {
      if (this.dxinfo.verifyCode.length == 6 && this.dxinfo.verifyCode != this.smsCode) {
        this.phoneError = '短信验证码输入不正确'
      } else {
        this.phoneError = ''
      }
    },
    sfSubmit: function () {
      const _this = this
      if (!this.sfinfo.identifyCode) {
        this.$message.error('请输入身份证号码')
        return
      }
      if (!this.sfinfo.password) {
        this.$message.error('请输入密码')
        return
      }
      const sfinfo = Object.assign({}, this.sfinfo)
      sfinfo.password = util.strEncode(sfinfo.password)
      
      CompanyIdLogin(sfinfo).then(function (res) {
        _this.successDeal(res)
      }).catch(function (e) {
        _this.$alert('登录失败', '提示')
      })
    },
    dxSubmit: function () {
      if (!this.dxinfo.mobileNum) {
        this.phoneError = '请输入手机号'
        return false
      } 
      if(!util.isMobile(this.dxinfo.mobileNum)){
        this.phoneError = '请输入正确的手机号'
        return false
      }
      this.phoneError = ''

      if (this.dxinfo.verifyCode == '' || !this.dxinfo.verifyCode) {
        this.phoneError = '请输入短信验证码'
        return false
      } else {
        this.phoneError = ''
      }
      // todo
      if (!this.dxinfo.verifyCode || this.dxinfo.verifyCode != this.smsCode) {
        this.phoneError = '短信验证码输入不正确'
        return false
      }
      const _this = this
      this.dxinfo.verifyCode = undefined
      CompanyMobileLogin(this.dxinfo).then(function (res) {
        _this.successDeal(res)
      }).catch(function (e) {
        _this.$alert('登录失败', '提示')
      })
    },
    successDeal(res) {
      const _this = this
      if (res.code === 200) {
        if (!res.data.enterpriseUid) {
          this.$alert('登录信息不正确,请重新输入', '提示')
          return
        }

        localStorage.setItem('facer_companyInfo', JSON.stringify(res.data))
        this.$alert('登录成功', '提示', {
          callback() {
            _this.auditCheck(res.data)
          }
        })
        return
      }  
      
      if (res.code === 408) {
        if (!res.data.enterpriseUid) {
          this.$alert('企业用户不存在，请注册后登录', '提示')
          return
        }
        
        localStorage.setItem('facer_companyInfo', JSON.stringify(res.data))
        _this.auditCheck(res.data)
        return
      } 
      res.msg && this.$alert(res.msg, '提示')
    },

    duqu() {
      var that = this
      new Device().startFun(function (type, message) {
        that.showMessage(type, message)
      })
    },
    showMessage (type, message) {
      if (undefined !== this.loading) this.loading.close()
      if (type !== 'loading') {
        this.$msgbox(message, '', type)
      } else {
        this.loading = this.$loading({
          lock: true,
          text: message,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }
    },
  }
}
</script>
<style lang="less" scope>
.page{
  position: relative;
  width: 100%;
  height: 100%;
  .bg{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .btn{
    background: rgb(32, 162, 178);
    border: 0px;
    line-height: 18px;
    padding: 7px 20px;
    display: inline-block;
    color: #fff;
  }
  .btn-login{
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 10;
  }


.Logintype {
  background: #f6f6f8;
  border-radius: 15px;
  text-align: center;
  height: 500px;

  .titles {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0 40px 0;
  }

  .mokuai {
    width: 260px;
    height: 300px;
    background: #ffffff;
    margin: 10px 35px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    cursor: pointer;

    img {
      width: 140px;
      margin-top: 60px;
      margin-bottom: 10px;
    }

    h2 {
      font-size: 22px;
    }
  }
}

.Logins {
  padding: 0 40px;
  margin-bottom: 30px;
  .btns {
    background: #20a2b2;
    border: 0;
  }

  .yzms {
    width: 120px;
    height: 40px;
    border: 1px solid #f5f5f5;
    display: inline-block;
    margin-top: 0px;
    float: right;
  }

  .el-tabs__item {
    font-size: 18px;
    color: #969696;
    height: 60px;
    line-height: 60px;
  }

  .el-tabs__item.is-active {
    color: #1e1e1e !important;
  }

  .el-tabs__active-bar {
    background-color: #1e1e1e !important;
  }

  .el-tabs__item:hover {
    color: #12cde5;
  }
}
}
</style>
